<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人基本信息网</title>
</head>
<script src = test.js  type="text/javascript"></script>
<script src = jquery-1.9.1.min.js type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="123.css">
<body background="6051c9c267882.jpg"
      style=" background-repeat:no-repeat ;
          background-size:100% 100%;
          background-attachment: fixed;"
      onload="fill()"
      text="white" ><!--背景图，自动适应填充.自动调用填充函数，填充默认数据-->
<canvas id = "myCanvas"  style="background: rgba(255,255,155,0); position: absolute; z-index: -1;" >
</canvas>
<!--画布背景设置为透明-->
<div id = "First">
    <div class="Head">
        <form name = "Info">
            <style>
                input{background-color:rgba(194,189,255,0.6)}
            </style><!--修改删除按钮 背景-->

            <BR>
            <font size="4">
                <a style="font-weight: bolder">
                    公司名称(*):
                </a>
            </font>

            <select style="width: 145px;border-radius: 3px" name="constrN">
                <option selected>请选择</option>
                <option>上海</option>
                <option>常州</option>
                <option>北京</option>
                <option>苏州</option>
            </select>

            <font size="4">

                <a style="font-weight: bolder">员工姓名:</a>

            </font><input name = "workerN" type="text" style="border-radius: 9px;background-color: white"/>

            <input type="button" onclick="Query()" value="查询" class="Qbutn" >
            <input type="button" onclick="AddWindow()" value="新增" class="Abutn">
            <!--input type="button" onclick="rowAdd()" value="合并" class="Abutn"-->
            <font size="2" class="Intro">
                （实现新增、查询、修改、删除功能，删除后再次查询显示工人状态为离职）
            </font>
            <BR><BR>
        </form>
    </div>

    <div>
        <div class="Alable">
            <font size="4">
                员工信息：
            </font>
        </div>
        <BR>
        <div class="WorkTable">
            <table id = "tableUserInfos" border="1"  width="100%">

                <tr style="background-color: rgba(38,0,39,0.5)">

                    <td>
                        <input  type="checkbox" id="select_all" onclick="SelectAll(this);"><font size="2">全选</font>
                    </td>
                    <td><font  id ="AName">员工姓名:</font></td>
                    <td><font  id="ACode">员工编码:</font></td>
                    <td><font  id="ACname">公司名称:</font></td>
                    <td><font  id="ABir">出生日期:</font></td>
                    <td><font  id="ATime">注册时间:</font></td>
                    <td><font  id="ANow">员工状态:</font></td>
                    <td width="150px"><font  id="ADo">操作：</font></td>
                </tr>
            </table>
        </div>
        <BR>
    </div>

    <div class="Qlabel">
        <font  size="4">
            查询结果：
        </font>
    </div><BR>
    <div id = "Query" class="querytable">
        <table id = "tableUserQuery" border="1" width="100%">

            <tr style="background-color:#000066">
                <td><input type="checkbox" id="newselect_all" onclick="NewSelectAll(this);"><font size="2">全选</font></td>
                <td><font id ="QName">员工姓名:</font></td>
                <td><font id="QCode">员工编码:</font></td>
                <td><font id="QCname">公司名称:</font></td>
                <td><font id="QBir">出生日期:</font></td>
                <td><font id="QTime">注册时间:</font></td>
                <td><font id="QNow">员工状态:</font></td>
                <td width="150px"><font id="QDo">操作：</font></td>
            </tr>
        </table>
    </div>
</div>

<div id="Second" class="white_content" >
    <div align="center" class="remain">
        <font size="4" style="font-weight: bolder">请输入：</font>
    </div>

    <style>
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: #9966CC;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #9966CC;
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #9966CC;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #9966CC;
        }
    </style>　　
    <input type="button" onclick="CloseWindow()" value="X" class="locat">

    <form name = "SetInfo">

        <font>公司名称(*): </font>

        <select style="width: 145px;"name="companyP" id="companyP">
            <option selected>请选择 </option>
            <option>上海</option>
            <option>常州</option>
            <option>北京</option>
            <option>苏州</option>
        </select><BR>



        <font>员工编码(*):</font>
        <input id = "workerNumb"
               name = "workerNumb"
               type="text" pattern="[0-9]{6}"
               placeholder="请输入0-9的6位数编码"
               class="RegisCode"><BR>

        <font>员工名称(*):</font>
        <input id = "workerName"
               name = "workerName"
               type="text"
               class="RegisName"><BR>

        <font>员工性别(*):</font>
        <select style="width: 145px;" name="sex" id = "sex">
            <option selected>请选择 </option>
            <option>男</option>
            <option>女</option>
        </select><BR>

        <font>员工生日(*):</font>
        <div style="display: inline">
            <input name = "workerBir"
                   type="text" placeholder="请填写员工生日......"
                   id = "workerBir"
                   class="RegisBir">
        </div>
        <BR>

        <font>联系电话(*):</font>
        <input name = "workerPhone"
               type="text" pattern="[0-9]{11}"
               placeholder="请输入0-9的5位手机号"
               id = "workerPhone"
               class="RegisPhone"> <BR>

        <font>联系地址(*):</font>
        <input name = "workerAddress"
               type="text" id = "workerAddress"
               class="Regislocat"><BR>

        <div><font color="white">
            <a  style="font-weight: bolder">
                职位(*):
            </a></font>
            <select style="width: 145px; " name="race" id = "race">
                <option selected>请选择 </option>
                <option>采购员</option>
                <option>水泥工</option>
                <option>安全员</option>
                <option>秘书员</option>
                <option>工程师</option>
            </select><BR>
        </div>
        <div>
            <font>
                <a  style="font-weight: bolder">
                    所在部门(*):
                </a>
            </font>
            <select style="width: 145px;" name="depart" id = "depart">
                <option selected>请选择 </option>
                <option>宣传部</option>
                <option>企划部</option>
                <option>秘书部</option>
                <option>工程部</option>
                <option>后勤部</option>
            </select><BR>
        </div>


        <font>注册日期(*):</font>
        <input name = "workerTime"
               type="text" placeholder="请填写注册日期......"
               id = "workerTime"
               class="RegisTime"> <BR>

        <div align="center">
            <input type="button" onclick="Save()" value="注册" style="color: white" size="4" class="RegisterBut" id = "Register">
        </div>
        <div style="">
            <div class = "d1"> <b>上传图片</b></div>
            <input type="file" style="" id = "PFile" class = "div">
            <img id="avatarPreview" src="1.jpg" title="点击更换图片"
                 style="position: relative;
                                 left: 350px;
                                 bottom: 250px;
                                  z-index: 9;
                                  float: left;
                                  width: 120px;
                                  height: 140px">
            <BR>
            <input type="button" onclick="Glance()" value="浏览" size="4" class="Pic" >
        </div>
    </form>

</div>
<div id="fade" class="black_overlay"></div>

<div id="Third" class="white_Content" style="display: none">
    <div align="center" class="remain" >
        <font size="4" style="font-weight: bolder">请输入：</font>
    </div>

    <style>
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: #9966CC;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #9966CC;
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #9966CC;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #9966CC;
        }
    </style>　　
    <input type="button" onclick="CloseWindow2()" value="X" class="locat2">

    <form name = "SetInfo">

        <font>公司名称(*): </font>

        <select style="width: 145px;"name="companyP" id="companyP2">
            <option selected>请选择 </option>
            <option>上海</option>
            <option>常州</option>
            <option>北京</option>
            <option>苏州</option>
        </select><BR>



        <font>员工编码(*):</font>
        <input id = "workerNumb2"
               name = "workerNumb"
               type="text" pattern="[0-9]{6}"
               placeholder="请输入0-9的6位数编码"
               class="RegisCode2"><BR>

        <font>员工名称(*):</font>
        <input id = "workerName2"
               name = "workerName"
               type="text"
               class="RegisName2"><BR>

        <font>员工性别(*):</font>
        <select style="width: 145px;" name="sex" id = "sex2">
            <option selected>请选择 </option>
            <option>男</option>
            <option>女</option>
        </select><BR>

        <font>员工生日(*):</font>
        <div style="display: inline">
            <input name = "workerBir"
                   type="text" placeholder="请填写工人生日......"
                   id = "workerBir2"
                   class="RegisBir2">
        </div>
        <BR>

        <font>联系电话(*):</font>
        <input name = "workerPhone"
               type="text" pattern="[0-9]{11}"
               placeholder="请输入0-9的5位手机号"
               id = "workerPhone2"
               class="RegisPhone2"> <BR>

        <font>联系地址(*):</font>
        <input name = "workerAddress"
               type="text" id = "workerAddress2"
               class="Regislocat2"><BR>

        <div><font color="white">
            <a  style="font-weight: bolder">
                职位(*):
            </a></font>
            <select style="width: 145px; " name="race" id = "race2">
                <option selected>请选择 </option>
                <option>采购员</option>
                <option>水泥工</option>
                <option>安全员</option>
                <option>秘书员</option>
                <option>工程师</option>
            </select><BR>
        </div>
        <div>
            <font>
                <a  style="font-weight: bolder">
                    所在部门(*):
                </a>
            </font>
            <select style="width: 145px;" name="depart" id = "depart2">
                <option selected>请选择 </option>
                <option>宣传部</option>
                <option>企划部</option>
                <option>秘书部</option>
                <option>工程部</option>
                <option>后勤部</option>
            </select><BR>
        </div>


        <font>注册日期(*):</font>
        <input name = "workerTime"
               type="text" placeholder="请填写注册日期......"
               id = "workerTime2"
               class="RegisTime2"> <BR>

        <div align="center">
            <input type="button" onclick="Register()" value="保存" style="color: white" size="4" class="RegisterBut2">
        </div>
        <div style="">
            <div class = "d1"> <b>上传图片</b></div>
            <input type="file" style="" id = "PFile2" class = "div2">
            <img id="avatarPreview2" src="1.jpg" title="点击更换图片"
                 style="position: relative;
                                 left: 350px;
                                 bottom: 250px;
                                  z-index: 9;
                                  float: left;
                                  width: 120px;
                                  height: 140px">
            <BR>
            <input type="button" onclick="Glance()" value="浏览" size="4" class="Pic2" >
        </div>
    </form>

</div>
<div id="fade2" class="black_overlayer"></div>
<!--实现粒子效果-->

<script>
    // 获取canvas元素
    var cvs = document.querySelector("canvas");
    // 获取上下文对象
    var ctx = cvs.getContext("2d");
    // 声明一个空数组，用来放后面生成的小球
    var ballsArr = [];

    $(function(){
        var canvas = $('#myCanvas');
        canvas.attr("width",$(window).get(0).innerWidth)
        canvas.attr("height",$(window).get(0).innerHeight)
        var context = canvas.get(0).getContext("2d");
        context.fillRect(0,0,canvas.width(),canvas.height());

        $(window).resize(function(){
            canvas.attr("width",$(window).get(0).innerWidth)
            canvas.attr("height",$(window).get(0).innerHeight)
            context.fillRect(0,0,canvas.width(),canvas.height());
        });
    });

    // 创建一个小球类
    function Balls (x, y){
        // 坐标x为传进来的x
        this.x = x;
        // 坐标y为传进来的y
        this.y = y;
        // 生成的小球半径为5到10中的任一整数（参数随便）
        this.r = _.random(5, 10);
        // 生成的小球的颜色为这七种颜色中的随机一种（参数随便）
        this.c = _.sample(["red", "orange", "yellow", "green", "cyan", "blue", "white"]);
        // 小球坐标x的增量为-4到4之间的整数（参数随便）
        this.dx = _.random(-4, 4);
        // 小球坐标y的增量为-4到4之间的整数（参数随便）
        this.dy = _.random(-4, 4);
        // 把生成的小球存入数组ballsArr
        ballsArr.push(this);
    }

    // 给所有Balls绑定一个方法update，目的是为了每次都能按照随机方向移动
    Balls.prototype.update = function (){
        // 每次x坐标加上增量dx
        this.x += this.dx;
        // 每次y坐标加上增量dy
        this.y += this.dy;
        // 每次半径缩小0.5（参数随便）
        this.r -= 0.5;
        // 半径小于等于0的话，就从小球数组中移出
        if(this.r <= 0){
            _.without(ballsArr, this);
        }
    }

    // 给所有Balls绑定一个方法render，目的是画圆。
    Balls.prototype.render = function (){
        // 半径小于等于0就没必要画了
        if(this.r <= 0){
            return;
        }
        // 开始绘制
        ctx.beginPath();
        // 绘制圆形，（圆心坐标x，圆心坐标y， 起始弧度，终止弧度，[顺逆时针]）
        ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
        // 颜色为数组中随机的一个
        ctx.fillStyle = this.c;
        // 画上画布
        ctx.fill();
        // 终止绘制
        ctx.closePath();
    }

    // onmousemove事件监听
    cvs.onmousemove = function (){
        // 在当前鼠标的位置，生成俩球，然后只要鼠标移动就一直生成小球，每次两个
        new Balls(event.offsetX, event.offsetY);
        new Balls(event.offsetX, event.offsetY);
        //new Balls(event.offsetX, event.offsetY);
    }

    // setInterval 模拟25FPS的帧率
    setInterval(function (){
        // 因为canvas上屏即像素化，所以先清屏
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        // _.each方法是针对每一个前面的元素，都运行后面的方法
        _.each(ballsArr, function (value){
            value.update();
            value.render();
        });
    }, 40);

</script>
</body>
</html>